<template>
   <!-- 加载图标样式8 -->
   <div class="loading">
      <div></div>
      <div></div>
   </div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   box-sizing: border-box;
   display: block;
   font-size: 0;
   height: 48px;
   position: relative;
   width: 48px
}

.loading>div {
   animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
   background: transparent;
   border: 3px solid;
   border-radius: 100%;
   box-sizing: border-box;
   display: inline-block;
   float: none;
   left: 50%;
   position: absolute;
   top: 50%
}

.loading>div:first-child {
   border-color: #ea4e3d transparent #ffaa09;
   height: 48px;
   position: absolute;
   width: 48px;
}

.loading>div:last-child {
   animation-direction: reverse;
   animation-duration: .5s;
   border-color: transparent #04be02 transparent #1678ff;
   height: 24px;
   width: 24px;
}

@keyframes ball-clip-rotate-multiple-rotate {
   0% {
      transform: translate(-50%, -50%) rotate(0deg)
   }

   50% {
      transform: translate(-50%, -50%) rotate(180deg)
   }

   to {
      transform: translate(-50%, -50%) rotate(1turn)
   }
}
</style>
